<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="添加区域" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view class="box-border flex-1 overflow-hidden" scroll-y :show-scrollbar="false">
      <wd-cell-group border>
        <wd-input
          label="区域名称"
          placeholder="请输入区域名称"
          custom-input-class="text-align-right"
          placeholder-class="text-align-right"
        />
        <wd-input
          label="可售卖菜品分类"
          readonly
          placeholder="请选择"
          custom-input-class="text-align-right"
          placeholder-class="text-align-right"
        >
          <template #suffix>
            <wd-icon name="chevron-right" color="#909193" />
          </template>
        </wd-input>
        <custom-wd-input-single-select
          label="可售卖菜品价格"
          readonly
          placeholder="请选择"
          custom-input-class="text-align-right"
          placeholder-class="text-align-right"
        />
      </wd-cell-group>
    </scroll-view>
    <view class="box-border h-[76px] flex items-center bg-white p-2">
      <wd-button
        class="flex-1 !border-1 !border-border !border-solid !text-primary"
        type="info"
        :round="false"
      >
        保存并继续添加
      </wd-button>
      <wd-button class="ml-2 flex-1" type="primary" :round="false">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
